export const compose = {
    //图片描述
    imageArray: [
        {
            id: '1',
            text: '图片上方'
        },
        {
            id: '2',
            text: '图片下方'
        },
        {
            id: '0',
            text: '无描'
        },
    ],
    imageDescription: '',//图片描述
    imageSetting: 0,
    list: [],//内容模版列表
    titleArray: [
        {
            id: '1',
            text: '识别'
        },
        {
            id: '0',
            text: '不识别'
        },
    ],//是否自动识别标题
    titleMaxLenth: 20,//标题最大字数
    titleSetting: 1
}
//https://www.365editor.com/
import jQuery from 'jquery'
import { nextTick } from 'vue';
/**
 * 内容格式划排版
 * @param mod render:一键排版，title:标题,image:图片描述,view:预览
 * @param datas 内容
 * @param template 模版内容
 */
export function funcComposeEvent(mod = 'title', datas, template, contentConfig = {}) {
    // console.info(contentConfig)
    //一键排版
    if (mod === 'render') {
        //获取标签与内容
        const funcIsTag = (tag) => {
            const tagName = tag.tagName;
            let tagContent = jQuery(tag).text().replace(/\s/g, "");
            return !(jQuery(tag).attr("isAdd") || !tagContent || "P" != tagName && "SPAN" != tagName && "STRONG" != tagName && "EM" != tagName && "H1" != tagName && "H2" != tagName && "H3" != tagName && "H4" != tagName && "H5" != tagName && "H6" != tagName)
        }
        //格式化内容
        const funcIsTitle = (datas = {}) => {
            return !(!datas || datas.type !== 'text') && !(datas.text.length <= compose.titleMaxLenth || datas.isImageText)
        }
        //格式化内容
        const funcForamContent = (item, index) => {
            var obj = null;
            if ("title" != index || item.isImageText) {
                if ("title" == index && item.isImageText) {
                    obj = descriptionHtml
                } else {
                    obj = jQuery(codeHtml)
                }
            } else {
                obj = titleHtml
            }
            obj.find('*').each(function () {
                if (funcIsTag(this) && 0 == jQuery(this).children().length) {
                    if (this.innerHTML == 'FormatReplaceName') {
                        jQuery(this).before(item.text)
                        jQuery(this).remove()
                    } else {
                        jQuery(this).html(item.text)
                    }
                }
            })
            descHtml += obj[0].innerHTML
        }
        //内容替换
        const formatContent = (text = '') => {
            return `<p ref="contentRef" style="font-size: ${contentConfig.fontSize}px; line-height: ${contentConfig.lineHeight}px; letter-spacing: ${contentConfig.letterSpacing}px;margin-bottom:${contentConfig.marginBottom}px">${text}</p>`
        }
        //无编辑内容
        if (!datas) {
            return Promise.reject('请填写内容后，再一键排版')
        }
        let bodyHtml = jQuery(`<div>${datas}</div>`),
            titleHtml = jQuery(`<div>${template.title}</div>`),
            codeHtml = `<div>${template.code}</div>`,
            descriptionHtml = jQuery(`<div>${template.description}</div>`),
            imageCodeHtml = jQuery(`<div>${template.image_code}</div>`),
            arrList = [],
            descHtml = "",
            funcForam = []
        bodyHtml.find("br").remove()
        titleHtml.find("br").remove()
        jQuery(codeHtml).find("br").remove()
        descriptionHtml.find("br").remove()
        imageCodeHtml.find("br").remove()
        if (bodyHtml.children().length <= 0 && bodyHtml.text()) {
            bodyHtml.html("<p>" + bodyHtml.text() + "</p>")
        }
        bodyHtml.find("*").each(function () {
            var htmls;
            if (funcIsTag(this)) {
                if (0 < jQuery(this).children().length) {
                    htmls = jQuery(this).html()
                } else {
                    htmls = jQuery(this).text().replace(/\s/g, "")
                }
                jQuery(this).find("*").each(function () {
                    jQuery(this).attr("isAdd", true)
                })
                arrList.push({
                    type: "text",
                    text: htmls,
                    isImageText: false
                });
            }
            if ("IMG" == this.tagName) {
                arrList.push({
                    type: "img",
                    src: jQuery(this).attr("src")
                })
            }
        })
        arrList.forEach(function (item, index) {
            if ("img" === item.type) {
                if ("1" == compose.imageSetting && 0 !== index && "text" == arrList[index - 1].type) {
                    arrList[index - 1].isImageText = true
                }
                if ("2" == compose.imageSetting && index < arrList.length - 1 && "text" == arrList[index + 1].type) {
                    arrList[index + 1].isImageText = true
                }
            }
        })
        arrList.forEach(function (item, index) {
            if ("text" === item.type && funcIsTitle(item) && funcIsTitle(funcForam[funcForam.length - 1])) {
                funcForam[funcForam.length - 1].text += formatContent(item.text)
            } else if ("text" === item.type && funcIsTitle(item)) {
                //第一行内容格式化
                item.text = formatContent(item.text);
                funcForam.push(item)
            } else {
                funcForam.push(item)
            }
        })
        funcForam.forEach(function (item, index) {
            var obj;
            if (item.type === 'text') {
                if ("1" == compose.titleSetting && item.text.length <= compose.titleMaxLenth) {
                    //判断内容是否格式化为标题
                    funcForamContent(item, "title");
                } else {
                    //内容
                    funcForamContent(item, "content")
                }
            } else if ("img" === item.type) {
                item = item.src
                if (0 < imageCodeHtml.find("img").length) {
                    imageCodeHtml.find("img").attr("src", item);
                    descHtml += imageCodeHtml[0].innerHTML
                } else {
                    obj = jQuery('<section style="text-align: center;"></section>');
                    obj.append('<img src="' + item + '" style="max-width: 100%;">');
                    descHtml += obj[0].outerHTML
                }
            }
        })
        return descHtml;
    }
}
/**
 * 选择模板素材内容替换
 * @param datas 内容
 * @param template 模版内容 
 */
export function funcRenderMaterial(event, template) {
    let content = ''
    const ue = UE.getEditor('editor');
    let node = null
    let obj = null
    content = ue.selection.getRange().cloneContents()
    if (jQuery(event.currentTarget).length && jQuery(event.currentTarget)[0].nodeName.toLowerCase() == 'p') {
        node = jQuery(event.currentTarget).parents(".material-list")
    } else {
        node = jQuery(event.currentTarget)
    }
    obj = node.find(".KolEditor:first").clone();//复制

    if (content !== null) {
        secondBrush(obj.clone())
    } else {
        ue.execCommand("inserthtml", obj.prop("outerHTML"))
    }
    ue.document.querySelectorAll("img").forEach(function (_this) {
        _this.setAttribute("draggable", "false")
    })
}

//标题替换
function secondBrush(node, els) {
    const len = node.find("p").length
    let idx = 0, index = 0;
    const ue = UE.getEditor('editor');
    ue.selection.getRange().adjustmentBoundary().traversal(function (_this) {
        let src = null
        if ("img" == _this.localName || jQuery(_this).find('img').length < 0) {
            src = _this.currentSrc || jQuery(_this).find('img').attr('src')
            node.find('img.KolImg').eq(index).attr('src', src)
            index++;
        } else if (_this.localName != 'br' && _this.textContent.replace(/\s/g, "") != '') {
            if (len <= idx) {
                src = node.find('p:last').attr('style');
                node.find('p:last').attr('<p style="' + src + '">' + _this.textContent + "</p>")
            } else {
                node.find('p').eq(idx).html(_this.textContent)
            }
            idx++;
        }
    });
    ue.execCommand("inserthtml", '<section  class="KolEditor">' + node.html() + "</section>");
    ue.document.querySelectorAll("img").forEach(function (obj) {
        obj.setAttribute("draggable", "false");
    });
}

/**
 * 模板内容替换
 * @param {*} template 选择模板信息
 * @param {*} mod all 全部替换,sort 分块替换
 */
export function funcTemplateEvent(template, mod) {
    const ue = UE.getEditor('editor');
    if (mod == 'sort') {
        //分块替换使用
        nextTick(() => {
            console.info(jQuery(".sort-content").find(".KolEditor"))
            jQuery(".sort-content").find(".KolEditor").mouseenter(function () {
                jQuery(this).css({
                    position: "relative"
                })
                jQuery(this).append('<section class="template-sort-cover"><img src="/arrow.png"/></section>');
                jQuery(".template-sort-cover").click(function (node) {
                    let content = ue.selection.getRange().cloneContents();
                    let editor = jQuery(this).parents(".KolEditor:first");
                    if (content != null) {
                        secondBrush(editor.clone())
                    } else {
                        ue.execCommand("inserthtml", '<section class="KolEditor">' + editor.find("section").eq(0).prop("outerHTML") + "</section>");
                        ue.document.querySelectorAll("img").forEach(function (_this) {
                            _this.setAttribute("draggable", "false")
                        })
                    }
                })
            })
            jQuery(".sort-content").find(".KolEditor").mouseleave(function () {
                jQuery(this).find(".template-sort-cover").remove()
            })
        });
    } else if (mod == 'all') {
        //整套使用
        ue.execCommand('inserthtml', template.code)
    }
}